<template>
	<view class="br_container">
		<view :style="{height: `${statusBarHeight}rpx`}" class="cal"></view>
		<!-- 顶部开始 -->
		<view class="br_top bg-white shadow animated slideInDown" v-if="setStatus">
			<view :style="{height: `${statusBarHeight}px`}"></view>
			<view class="br_box flex align-center">
				<image src="@/static/l-back.png" mode="widthFix" @tap="backBookDetail"></image>
				<text class="top_1">{{novelName}}</text>
				<text class="top_2 flex-1 text-ellipsis">
					{{chapter[0].title}}
				</text>
			</view>
		</view>
		<!-- 顶部结束 -->
		
		<!-- 底部开始 -->
		<view class="fixed-bottom flex align-center bg-white font shadow animated slideInUp" style="height: 130rpx;"
			v-if="setStatus">
			<!-- 目录 -->
			<view class="flex-1 flex flex-column align-center" @tap="changeCatalogStatus(true)">
				<image src="@/static/cata.svg" mode="widthFix" class="imgSize"></image>
				<view>目录</view>
			</view>
			<!-- 夜间 -->
			<view class="flex-1 flex flex-column align-center" @tap="isNight">
				<image src="@/static/dark.svg" mode="widthFix" class="imgSize"></image>
				<view>夜间</view>
			</view>
			<!-- 字体 -->
			<view class="flex-1 flex flex-column align-center" @tap="changeTypeFaceStatus(true)">
				<image src="@/static/font.svg" mode="widthFix" class="imgSize"></image>
				<view>字体</view>
			</view>
			<!-- 更多 -->
			<view class="flex-1 flex flex-column align-center" @tap="changeMoreStatus(true)">
				<image src="@/static/more.svg" mode="widthFix" class="imgSize"></image>
				<view>更多</view>
			</view>
		</view>
		<!-- 底部结束 -->

		<!-- 文本开始 -->
		<swiper :class="curTheme" :style="{height: `${calHeight}rpx`, fontSize: `${myFontSize}px`, lineHeight: `${myLineHeight}px`}" class="px-2"
		 @tap="changeSetStatus" @change="swiperChangeChapter" :current="chapterIndex">
			<swiper-item v-for="item in LoadedChapters" :key="item.id">
				<scroll-view scroll-y :style="{height: `${calHeight}rpx`}">
					<uni-load-more status="loading" v-if="!item.text"></uni-load-more>
					<rich-text :nodes="item.text"></rich-text>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 文本结束 -->

		<!-- 目录开始 -->
		<uni-drawer :visible="catalogStatus" @close="changeCatalogStatus(false)">
			<view :style="{height:`${statusBarHeight}px`}"></view>
			<view class="flex align-center justify-center" style="height: 80rpx;">章节选择</view>
			<scroll-view scroll-y :style="{height: `${calHeight - 80}rpx`}">
				<block v-for="item in chapter" :key="item.id">
					<view class="px-1 py-2 font text-ellipsis border-bottom rounded"
						:class="chapterIndex + 1 === item.id ? 'curChapter' : ''" @tap="toPointChapter(item.id)">
						{{item.title}}
					</view>
				</block>
			</scroll-view>
		</uni-drawer>
		<!-- 目录结束 -->

		<!-- 字体设置开始 -->
		<view :class="curTheme" class="fixed-bottom shadow px-3 pt-2 animated slideInUp" style="height: 180rpx;"
			v-if="typeFaceStatus">
			<view class="flex">
				字体:
				<slider class="flex-1" :value="myFontSize" min="20" max="50" block-size="16" activeColor="#34495E"
					backgroundColor="#ECF1F0" @change="changeFontSize" @changing="changeFontSize" />
			</view>
			<view class="flex">
				间距:
				<slider class="flex-1" :value="myLineHeight" min="20" max="100" block-size="16" activeColor="#34495E"
					backgroundColor="#ECF1F0" @change="changeLineHeight" @changing="changeLineHeight" />
			</view>
		</view>
		<!-- 字体设置结束 -->

		<!-- 更多开始 -->
		<view :class="curTheme" class="fixed-bottom flex flex-column justify-center shadow px-3 animated slideInUp"
			style="height: 250rpx;" v-if="moreStatus">
			<!-- H5无法获取与调节亮度 -->
			<!-- #ifndef H5 -->
			<view class="flex align-center">
				亮度:
				<slider class="flex-1" :value="brightNess" min="0" max="100" block-size="16" activeColor="#34495E"
					backgroundColor="#ECF1F0" @change="setBrightNess" />
			</view>
			<!-- #endif -->

			<view class="flex font text-light-black" style="justify-content: space-between;">
				<block v-for="item in themes" :key="item.id">
					<view class="flex-1">
						<view :class="item.id" class="border rounded mx-1 my-1" style="height: 80rpx;"
							@tap="changeThemeIndex(item.id)"></view>
						<view class="text-center">{{item.name}}</view>
					</view>
				</block>
			</view>
		</view>

		<!-- 更多结束 -->
	</view>
</template>

<script>
	import test from '@/common/test';
	// 工具库
	import $U from '@/common/unit.js';
	// htmlParser 工具函数  string转nodes
	import htmlParser from '@/common/html-parser.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'

	export default {
		// 数据
		data() {
			return {
				calHeight: 0,
				statusBarHeight: this.$statusBarHeight,
				// 各种状态
				setStatus: false,
				catalogStatus: false,
				typeFaceStatus: false,
				moreStatus: false,

				chapterIndex: 0, //当前章节标识
				// 来自test.js
				novelName: test.name, //小说名称
				chapter: test.chapterCatalog, //小说目录
				// testChapter: htmlParser(test.content[0].text) 
				testChapters: test.content,
				// 延迟加载，已经加载的章节
				LoadedChapters: [],

				myFontSize: uni.getStorageSync('myFontSize') || 20, // 字体大小
				myLineHeight: uni.getStorageSync('myLineHeight') || 45, // 字体行高
				brightNess: 0, // 亮度值

				// 主题
				themes: [{
						id: 'blueTheme',
						name: '天蓝'
					},
					{
						id: 'eyeHelpTheme',
						name: '护眼'
					},
					{
						id: 'lightGretTheme',
						name: '淡灰'
					},
					{
						id: 'morningTheme',
						name: '早晨'
					},
					{
						id: 'nightTheme',
						name: '夜间'
					}
				],
				themeIndex: uni.getStorageSync('themeIndex') // 主题标识

			};
		},
		// 计算属性
		computed: {
			// 当前章节标题
			curChapterTitle() {
				return this.chapterCatalog[this.chapterIndex].title || '加载中'
			},
			
			// 当前主题
			curTheme() {
				let index = this.themeIndex;
				if (!uni.getStorageSync('themeIndex') && uni.getStorageSync('themeIndex') !== 0) {
					index = 3
				}
				return this.themes[index].id
			},
		},
		// 组件
		components: {
			uniLoadMore,
			uniDrawer
		},

		// 方法
		methods: {
			// 改变设置部分状态
			changeSetStatus() {
				if (!this.setStatus) {
					if (this.typeFaceStatus || this.moreStatus) {
						this.changeTypeFaceStatus(false);
						this.changeMoreStatus(false);
						return
					}
				}
				this.setStatus = !this.setStatus
			},
			// 改变目录设置部分状态
			changeCatalogStatus(Bol) {
				// console.log(1); //跳了两次，所以用 Bol
				this.catalogStatus = !this.catalogStatus
			},
			// 改变字体设置部分状态
			changeTypeFaceStatus(Bol) {
				this.typeFaceStatus = Bol;
				if (this.typeFaceStatus) this.changeSetStatus()
			},

			// 改变更多设置部分状态
			changeMoreStatus(Bol) {
				this.moreStatus = Bol;
				if (this.moreStatus) this.changeSetStatus()
			},

			// 返回详情页
			backBookDetail(){
				uni.navigateBack({
					url: '/pages/bookDetail/bookDetail'
				});
			},
			// 预加载
			PreLoad() {
				// this.LoadedChapters.shift();
				test.chapterCatalog.forEach(item => this.LoadedChapters.push({
					id: item.id,
					title: item.title,
					text: ''
				}))
			},
			// 延迟加载
			DeplyLoad() {
				let index = this.chapterIndex;
				if (this.LoadedChapters[index].text === '') {
					setTimeout(() => this.LoadedChapters[index].text = htmlParser(test.content[index].text), 1000)
				}
			},
			// 改变当前章节标识
			changeIndex(index) {
				this.chapterIndex = index
			},
			// 滑动改变章节标识
			swiperChangeChapter(e) {
				this.changeIndex(e.detail.current);
				this.DeplyLoad()
				// console.log('LoadedChapters:', this.LoadedChapters); // 确保数据，调试内容
			},
			// 改变目录部分状态
			changeCatalogStatus(Bol) {
				this.catalogStatus = Bol;
				if (this.catalogStatus) this.changeSetStatus()
			},

			// 改变字体大小
			changeFontSize(e) {
				this.myFontSize = e.detail.value;
				uni.setStorageSync('myFontSize', this.myFontSize)
			},
			// 改变行文间距
			changeLineHeight(e) {
				this.myLineHeight = e.detail.value;
				uni.setStorageSync('myLineHeight', this.myLineHeight)
			},

			// 获取亮度
			getBrightNess() {
				uni.getScreenBrightness({
					success: e => this.brightNess = Math.floor(e.value) / 8 * 100
				})
			},
			// 设置亮度
			setBrightNess(e) {
				let newVal = e.detail.value;
				this.brightNess = newVal;
				uni.setScreenBrightness({
					value: newVal * 8 / 100
				})
			},

			// 更改主题标识
			changeThemeIndex(id) {
				let curIndex = this.themes.findIndex(theme => theme.id === id);
				this.themeIndex = curIndex;

				// 写入主题缓存
				uni.setStorageSync('themeIndex', curIndex)
			},
			// 切换夜间模式
			isNight() {
				if (this.themeIndex !== 4) {
					this.changeThemeIndex('nightTheme')
				} else {
					this.changeThemeIndex('morningTheme')
				}
			}

		},
		// 页面生命周期
		onLoad(e) {
			// console.log(e)
			this.PreLoad();
			this.DeplyLoad()
			// let id = e.chapterID;
			// 	this.init(id)			
		},
		// 动态计算页面高度
		mounted() {
			// 调用 htmlParser 组件
			$U.calSurplusHeight({
				pageID: this,
				pos: 'cal',
				success: val => this.calHeight = val
			})
		},
		created() {
				// 计算高度
				// #ifndef MP-WEIXIN
				let height = $U.getSystemHeight() - $U.Torpx(this.statusBarHeight);
				// #endif
				
				// #ifdef MP-WEIXIN
				let height = $U.getSystemHeight() - $U.Torpx(this.statusBarHeight - 50);
				// #endif
				
				this.calHeight = Math.floor(height);
				
				
				// 获取屏幕亮度
				// #ifndef H5
				this.getBrightNess()
				// #endif
			}
			
	}
</script>

<style lang="scss">
	.br_container {

		// padding: 20rpx 0;
		// 头部
		.br_top {
			position: fixed;
			// background-color: #ccc;
			z-index: 999;

			.br_box {
				width: 1000rpx;
				height: 100rpx;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				margin: 0 30rpx;
				transform: translate(0, 10%);
			}

			.top_1 {
				margin-right: 30rpx;
				font-weight: bold;
				font-size: 32rpx;
			}

			.top_2 {}
		}

		// 底部
		.imgSize {
			width: 54rpx;
			height: 54rpx;
		}

		// 文本
		.scroll-container {
			::-webkit-scrollbar {
				display: none;
			}
		}

	}
</style>